<template>
  <div>
    <headerNavigation :jump="2"></headerNavigation>
    <labelNavigation></labelNavigation>

    <!-- 主体内容 -->
    <div class="main">
      <button class="back">
        <i
          class="el-icon-arrow-left"
          style="color: #bebebe; font-size: 20px; margin-right: 5px"
          @click="remarks"
        ></i>
        <span @click="remarks">返回</span>
      </button>

      <div class="main-content">
        <div class="personal">
          <div class="each-students">
            <span class="right-photo">
              <img
                :src="`${src1 + student.avatar}`"
                style="width: 4rem; height: 4rem; border-radius: 50%"
                v-if="student.avatar != ''"
              />
              <img
                src="@/assets/images/boy.png"
                style="width: 4rem; height: 4rem; border-radius: 50%"
                v-if="student.sex == 0 && student.avatar == ''"
              />
              <img
                src="@/assets/images/girl.png"
                style="width: 4rem; height: 4rem; border-radius: 50%"
                v-if="student.sex == 1 && student.avatar == ''"
              />
            </span>

            <div class="left-each">
              <span class="name">{{ student.stuName }}</span>

              <div class="boy" v-if="student.sex == 0">
                <span>👦</span>
                <span>男孩</span>
              </div>

              <div class="girl" v-if="student.sex == 1">
                <span>👧</span>
                <span>女孩</span>
              </div>
            </div>
          </div>
        </div>

        <textarea
          class="text-content"
          v-model="myData11.comments"
          placeholder="请输入您对学生的寄语"
        ></textarea>

        <div class="confirm-container">
          <button class="confirm" @click="writeRemarks(student)">确认</button>
        </div>
      </div>
    </div>

    <footerNavigation></footerNavigation>
  </div>
</template>

<script>
import { postOneStudentComments } from "@/api/message/gradeTeacher";
import headerNavigation from "../components/background/headerNavigation1";
import labelNavigation from "../components/background/labelNavigation3";
import footerNavigation from "../components/background/footerNavigation";
import module from "@/allurlimg/img";

export default {
  data() {
    return {
      src1: "",
      classesData: [],
      student: {},
      myData11: {},
    };
  },
  components: {
    headerNavigation,
    labelNavigation,
    footerNavigation,
  },
  mounted() {
    this.src1 = module.host;
    this.student = this.$route.params.student;
    this.myData11 = this.$route.params.comments;
    // this.getStudentComments(this.$route.params.student)

    this.$bus.$on((data) => {
      this.classesTwoData.push(data);
    });
  },
  methods: {
    remarks() {
      this.$router.push("/remarks");
    },

    writeRemarks(data) {
      const studentComments = {
        studentId: this.myData11.studentId,
        comments: this.myData11.comments,
      };
      Promise.all([this.psotStudentComments(studentComments)]).then((res) => {
        this.$router.push({
          name: "writeRemarks",
          params: { student: data },
        });
      });
    },

    async psotStudentComments(data) {
      // console.log(data, "studentComments");

      const res = await postOneStudentComments(data);
      console.log(res, "postOneStudentComments");
    },
  },
  created() {},
};
</script>


<style scoped>
/* 主体内容 */
.main {
  display: flex;
  flex-direction: column;
  height: 640px;
  border: 2px solid #f5f5f5;
  margin: 20px 230px 160px 230px;
}

/* 返回 */
.back {
  display: flex;
  font-size: 16px;
  border: 0px solid;
  align-items: center;
  background: #fff;
  margin: 10px 0 0 20px;
}

/* 内容 */
.main-content {
  margin: 10px 60px;
  position: relative;
}

/* 个人信息栏 */
.personal {
  display: flex;
  flex-wrap: wrap;
}

/* 单个个人信息框 */
.each-students {
  display: flex;
  flex-direction: row;
  height: 80px;
  border-radius: 5px;
}

/* 左侧信息框 */
.each-students .left-each {
  display: flex;
  flex-direction: column;
  margin: 10px;
}

/* 姓名信息 */
.left-each .name {
  font-size: 16px;
}

/* 性别信息 */
.each-students .boy {
  font-size: 12px;
  margin-top: 7px;
  width: 60px;
  height: 20px;
  border-radius: 5px;
  padding: 2px 7px;
  color: #5f9eed;
  background: #e4f0fe;
}

.each-students .girl {
  font-size: 12px;
  margin-top: 7px;
  width: 60px;
  height: 20px;
  border-radius: 5px;
  padding: 2px 7px;
  color: #ed8c5f;
  background: #fef1e4;
}

/* 头像信息 */
.each-students .right-photo {
  margin: 5px 10px 5px 0;
  display: flex;
  width: 66px;
  height: 66px;
  border-radius: 50%;
}

.text-content {
  display: flex;
  width: 100%;
  height: 400px;
  border-radius: 5px;
  border: 1px solid #f5f5f5;
  box-shadow: inset 0px 0px 2px 1px rgba(99, 99, 99, 0.2);
  -webkit-box-shadow: 0px 0px 2px 1px rgba(99, 99, 99, 0.2);
  -moz-box-shadow: 0px 0px 2px 1px rgba(99, 99, 99, 0.2);
  font-size: 1.2375rem;
}

.confirm-container {
  display: flex;
  margin: 20px 0px;
  justify-content: center;
}

.confirm {
  width: 280px;
  height: 40px;
  border-radius: 20px;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #fff;
  background: #7c0000;
  border: 1px solid rgba(187, 187, 187);
}
</style>